<!DOCTYPE html> 
<html> 
<head> 
	<meta charset="utf-8"> 
	<title>fillstyle</title> 
	<style>
		body{ width:100%; height:800px; }
	</style>
	<script src="../lib/jquery/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script> 
	<script> 
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  // Create gradients
  var lingrad = ctx.createLinearGradient( 0,0,0,10 );
  lingrad.addColorStop(0, '#297a00');
  lingrad.addColorStop(0.5, '#329700');
  lingrad.addColorStop(1, '#297a00');

  var lingrad2 = ctx.createLinearGradient(0,50,0,95);
  lingrad2.addColorStop(0.5, '#000');
  lingrad2.addColorStop(1, 'rgba(0,0,0,0)');

  // assign gradients to fill and stroke styles
  ctx.fillStyle = lingrad;
  ctx.strokeStyle = lingrad2;
  
  // draw shapes
  ctx.fillRect(0,0,130,10);
  //ctx.strokeRect(50,50,50,50);

}	
		$( function(){
			
			draw();
			
									
		} );
	</script> 
</head> 
<body id="canvasdemo"> 
	<canvas id="canvas" width="400" height="400" ></canvas> 
</body> 
<script></script>
</html>